<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery File Upload Example - Record Plugin for Video.js</title>
        <link href="../../node_modules/video.js/dist/video-js.min.css" rel="stylesheet">
        <link href="../../node_modules/videojs-wavesurfer/dist/css/videojs.wavesurfer.min.css" rel="stylesheet">
        <link href="../../dist/css/videojs.record.css" rel="stylesheet">
        <link href="../assets/css/examples.css" rel="stylesheet">

        <script src="../../node_modules/video.js/dist/video.min.js"></script>
        <script src="../../node_modules/recordrtc/RecordRTC.js"></script>
        <script src="../../node_modules/webrtc-adapter/out/adapter.js"></script>
        <script src="../../node_modules/wavesurfer.js/dist/wavesurfer.min.js"></script>
        <script src="../../node_modules/wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js"></script>
        <script src="../../node_modules/videojs-wavesurfer/dist/videojs.wavesurfer.min.js"></script>

        <script src="../../dist/videojs.record.js"></script>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="../../node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
        <script src="../../node_modules/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
        <script src="../../node_modules/blueimp-file-upload/js/jquery.fileupload.js"></script>

        <script src="../browser-workarounds.js"></script>

        <style>
        /* change player background color */
        #myAudio {
            background-color: #ff6b6b;
        }
        /* hide file upload button */
        #fileupload {
            display: none;
        }
        </style>
    </head>

    <body>
        <audio id="myAudio" class="video-js vjs-default-skin"></audio>

        <input id="fileupload" type="file" name="files[]" multiple>

        <script>
        /* eslint-disable */
        var options = {
            controls: true,
            bigPlayButton: false,
            width: 600,
            height: 300,
            plugins: {
                wavesurfer: {
                    backend: 'WebAudio',
                    waveColor: '#f7fff7',
                    progressColor: '#ffe66d',
                    displayMilliseconds: true,
                    debug: true,
                    cursorWidth: 1,
                    hideScrollbar: true,
                    plugins: [
                        // enable microphone plugin
                        WaveSurfer.microphone.create({
                            bufferSize: 4096,
                            numberOfInputChannels: 1,
                            numberOfOutputChannels: 1,
                            constraints: {
                                video: false,
                                audio: true
                            }
                        })
                    ]
                },
                record: {
                    audio: true,
                    video: false,
                    maxLength: 20,
                    displayMilliseconds: true,
                    debug: true
                }
            }
        };

        $(function() {
            // Initialize the jQuery File Upload widget
            $('#fileupload').fileupload({
                url: '//localhost/jQuery-File-Upload/server/php/',
                done: function (e, data) {
                    $.each(data.files, function (index, file) {
                        var message = 'Upload complete: ' + file.name + ' (' +
                            file.size + ' bytes)';
                        $('<p/>').text(message).appendTo(document.body);
                        console.log(message);
                    });
                },
                fail: function (e, data) {
                    console.error('upload error:', e.type, data);
                }
            });

            // apply some workarounds for certain browsers
            applyAudioWorkaround();

            var player = videojs('myAudio', options, function() {
                // print version information at startup
                var msg = 'Using video.js ' + videojs.VERSION +
                    ' with videojs-record ' + videojs.getPluginVersion('record') +
                    ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
                    ', wavesurfer.js ' + WaveSurfer.VERSION + ' and recordrtc ' +
                    RecordRTC.version;
                videojs.log(msg);
            });

            // player error handling
            player.on('deviceError', function() {
                console.warn('device error:', player.deviceErrorCode);
            });

            player.on('error', function(element, error) {
                console.error(error);
            });

            // data is available
            player.on('finishRecord', function() {
                // the blob object contains the audio data
                var audioFile = player.recordedData;

                console.log('finished recording: ', audioFile);

                // upload data to server
                var filesList = [audioFile];
                $('#fileupload').fileupload('add', {files: filesList});
            });
        });
        </script>

    </body>
</html>
